<template>
  <el-dialog
    v-el-drag-dialog
    title="添加调拨单"
    :visible.sync="visible"
    width="1024px"
    append-to-body
    destroy-on-close
    @closed="reset"
  >
    <el-form ref="dataForm" class="form" :inline="true" :model="query" label-position="right" label-width="100px">
      <el-form-item label="期望日期" prop="expectDt">
        <el-date-picker
          v-model="query.expectDt"
          type="date"
          placeholder="选择日期"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item label="调出仓库:" prop="outStoreId">
        <el-select
          v-model="query.outStoreId"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in leftStoreMap"
            :key="item.storeId"
            :label="item.storeName"
            :value="item.storeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="调入仓库:" prop="inStoreId">
        <el-select
          v-model="query.inStoreId"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in rightStoreMap"
            :key="item.storeId"
            :label="item.storeName"
            :value="item.storeId"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form>
    <lb-table
      ref="multipleTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      :page-size="10"
      :immediate-fetch="false"
      @fetch="fetchData"
      @selection-change="handleSelectionChange"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { selectOrgSNNoAndReType, selectOrgSNNo, stockTransBillList } from '@/api'
  import { parseTime } from '@/utils'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  export default {
    name: 'allotDialog',
    data() {
      return {
        visible: false,
        query: {
          transStatus: 2, // 已审核
          expectDt: '',
          outStoreId: '',
          inStoreId: '',
          planCodeFilter: 1,
          carNumber: '',
          driverId: ''
        },
        treeData: [],
        leftStoreMap: [],
        rightStoreMap: [],
        tableData: {
          total: 0,
          column: [
            {
              type: 'selection',
              width: 55
            },
            {
              prop: 'stockTransCode',
              label: '调拨单号',
              width: 100
            },
            {
              prop: 'outStoreName',
              label: '调出仓库',
              width: 120
            },
            {
              prop: 'inStoreName',
              label: '调入仓库',
              width: 120
            },
            {
              prop: 'bottleNum',
              label: '申请数量'
            },
            {
              prop: 'expectDt',
              label: '期望日期',
              width: 160,
              render: (h, { row }) => (
                <span>
                  {row.expectDt && parseTime(row.expectDt, '{y}-{m}-{d}')}
                </span>
              )
            },
            {
              prop: 'remark',
              label: '备注'
            }
          ],
          data: [
            {
              remark: '1'
            },
            {
              remark: '2'
            }
          ]
        },
        currentRow: null
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    created() {
    },
    methods: {
      async open(temp) {
        this.initStoreMap()
        this.getTreeData()
        return new Promise(resolve => {
          this.resolve = resolve
          this.temp = temp
          this.visible = true
          this.query.transStatus = 2 // 已审核
          this.query.expectDt = ''
          this.query.outStoreId = ''
          this.query.inStoreId = ''
          this.query.planCodeFilter = 1
          this.query.carNumber = this.temp.truckCode
          this.query.driverId = this.temp.driverId
          this.fetchData({ currentPage: 1, pageSize: 10 })
        })
      },
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      searchClear() {
        if (this.$refs.treeSelect) this.$refs.treeSelect.keywords = ''
      },
      async initStoreMap() {
        selectOrgSNNoAndReType({
          currentPage: 1,
          pageSize: 9999,
          reType: 4
        }).then((res) => {
          this.storeMap = res.data
          this.leftStoreMap = res.data
        })
        selectOrgSNNo({
          orgSNNo: '',
          reType: 4
        }).then(res => {
          const rightStoreMap = res.data.filter(item => {
            return item.reType === 1 || item.reType === 3 || item.reType === 6
          })
          this.rightStoreMap = rightStoreMap
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          ...this.query,
          currentPage,
          pageSize
        }
        if (query.expectDt) {
          query.expectDt = parseTime(query.expectDt, '{y}-{m}-{d}')
          query.expectDtEnd = query.expectDt
        }
        const res = await stockTransBillList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      search() {
        this.$refs.multipleTable.fetch({ currentPage: 1 })
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      success() {
        if (this.multipleSelection.length > 0) {
          let identical = true
          this.multipleSelection.forEach((item) => {
            if (item.carNumber !== this.temp.truckCode || item.driverId !== this.temp.driverId) {
              identical = false
            }
          })
          if (identical) {
            this.resolve(this.multipleSelection)
            this.visible = false
          } else {
            this.$message.warning('请选择司机、车辆信息和调拨计划一致的调拨单')
          }
        } else {
          this.$message.warning('请选择调拨单')
        }
      },
      reset() {
        this.$refs.dataForm.resetFields()
      }
    }
  }
</script>

<style scoped>
.form {
  margin-bottom: 10px;
}
</style>
